<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="author" content="陈旭光，Chen XuG,chenxvguang1991@163.com">
	<title>爱心鱼</title>
    <link rel="shortcut icon" href="img/title.ico"/>
	<style type="text/css">
	    *{margin: 0;padding: 0}
	    body{background: #EDEDED;font-family:  "Arial","Microsoft YaHei","黑体","宋体",sans-serif;}
                 body>h1,h3{width: 100%;text-align: center;color:  #388E8E}
                 h3{text-indent: 150px}
                 #can{position: relative;margin: 30px  auto;width: 800px;height: 600px}
                 canvas{position: absolute;top: 0;left: 0}
                 #can1{z-index: 0}
                 #can2{z-index: 1}
                 #start{position:absolute;top: 0;left:0;width: 800px;height: 600px; z-index: 10; }
                 #start p{width: 600px;font-size: 15px;color:#EEE8CD;line-height: 20px;text-indent: 30px;margin: 50px 100px ;}
                 #startGame{display: block;width: 200px;height: 100px;font-size: 50px ;text-align: center;line-height: 100px;margin: 25px auto;color: rgba(225,225,225,1);border-radius: 20px;border: 2px solid rgba(225,225,225,1);cursor: pointer;transition: all 0.2s ease-in}
                 #startGame:hover{background:rgba(255,255,255,1);color:rgba(59,21,78,1);border: 2px solid rgba(59,21,78,1) }
                 #end,#pause{display: none;position:absolute;top: 0;left:0;width: 800px;height: 600px; z-index: 10;background:rgba(225,225,225,.5); }
                 #end h1,#pause h1{width: 800px;height: 150px;font-size: 50px ;text-align: center;line-height: 150px;margin: 100px  auto;color: white;}
                 #reStartGame,#continue{display: block;width: 200px;height: 60px;border-radius: 25px;border: 2px solid rgba(225,225,225,.8);font-size: 30px ;text-align: center;line-height: 60px;margin: 0 auto;color: rgba(225,225,225,.8);cursor: pointer;transition: all 0.2s ease-in}
                 #reStartGame:hover,#continue:hover{background:rgba(255,255,255,.8);color:rgba(59,21,78,.8);border: 2px solid rgba(59,21,78,.8) }
                 #music{position: absolute;left:0;top: -20px;width: 100px;height: 20px;font-size: 15px;color: rgba(59,21,78,1);line-height: 20px;text-align: center;cursor: pointer;background:rgba(238,201,0,.5) }
                 .hidMusic{display: none}
                 .showMusic{display: inline}
	</style>
</head>
<body>
    <h1>爱心鱼</h1>
    <h3>—by: Chen  XuG  最高分<span id=maxScore>0</span></h3>
    <div id='can'>
	    <div id='start'>
	              <p>在我国南海，一条可爱的鱼宝宝正在长身体的时候，鱼宝宝身体变白时，说明它饿了，如果不能及时吃到海葵的果实就会饿死。你需要移动鼠标控制鱼妈妈吃海葵果实，并喂养鱼宝宝。当鱼宝宝吃到橙色果实你将得到10分，蓝色果实得到15分，鱼妈妈可以一次喂养多个果实哦（单击鼠标可以暂停游戏）~</p>
	              <p>游戏改进：仿写原游戏，并添加开始游戏，暂停游戏，重新开始游戏操作，同时添加场景音效和动作音效。</p>
	    	<span id='startGame'>Start</span>
	    </div>
	    <canvas id='can1' width='800' height="600"></canvas>
	    <canvas id='can2' width='800' height="600"></canvas>
	    <div id='end'>
	              <h1>Game over</h1>
	    	<span id='reStartGame'>重新开始</span>
	    </div>
	    <div id='pause'>
	              <h1>暂停</h1>
	    	<span id='continue'>继续游戏</span>
	    </div>
	    <p id='music'><span class="hidMusic" id='openMusic'>打开</span><span class="showMusic" id='closeMusic'>关闭</span>音效</p>
    </div>
    <script type="text/javascript" src="script/main.js"></script>
</body>
</html>